<template>
<div>
    <el-button v-if="type == 'button'" type="primary" size="small" @click="handleFetchContentDetail(contentDetail,detailDialogTitle)">{{detailTagContent}}</el-button>
    <span v-if="type == 'link'" class="link-type content" @click="handleFetchContentDetail(contentDetail,detailDialogTitle)">{{detailTagContent}}</span>
    <el-dialog :title="detailDialogTitle" :visible.sync="dialogVisible" width="70%" center :close-on-click-modal='false' :show-close='false' :close-on-press-escape='false'>
      <span v-if="!haveImg">{{contentDetail}}</span>
      <span v-if="haveImg"><img :src="imgSrc" :width="imgWidth" :height="imgHeight" /></span>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
</div>
</template>

<script>
export default {
  name: "detailDialog",
  props: {
    contentDetail: String|Number,
    detailDialogTitle: String,
    type: {
      type: String,
      default: 'link'
    },
    haveImg: {
      type: Boolean,
      default: false
    },
    imgSrc: {
      type: String,
      default: ''
    },
    imgWidth: {
      type: String,
      default: '100%'
    },
    imgHeight: {
      type: String,
      default: '100%'
    },
    detailTagContent: String|Number
  },
  data() {
    return {
      dialogVisible: false
    };
  },
  methods: {
    // 详细内容handler
    handleFetchContentDetail(contentDetail, detailDialogTitle) {
      this.contentDetail = contentDetail;
      this.detailDialogTitle = detailDialogTitle;
      this.dialogVisible = true;
    }
  }
};
</script>
<style scoped>
.content {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
